<template>
  <div>
    <el-row :gutter="20" v-permission="['getStatistics1,GET']">
      <template v-if="panels.length == 0">
                <el-col :span="6" v-for="i in 4" :key="i">
                    <el-skeleton style="width: 100%;" animated loading>
                        <template #template>
                            <el-card shadow="hover" class="border-0">
                                <template #header>
                                    <div class="flex justify-between">
                                        <el-skeleton-item variant="text" style="width: 50%" />
                                        <el-skeleton-item variant="text" style="width: 10%" />
                                    </div>
                                </template>
                                <el-skeleton-item variant="h3" style="width: 80%" />
                                <el-divider />
                                <div class="flex justify-between text-sm text-gray-500">
                                    <el-skeleton-item variant="text" style="width: 50%" />
                                    <el-skeleton-item variant="text" style="width: 10%" />
                                </div>
                            </el-card>
                        </template>
                    </el-skeleton>
                </el-col>
            </template>
    <el-col :span="6" :offset="0" v-for="(item,index) in panels" :key="index"> 
    <el-card shadow="hover" class="border-0">
      <template #header>
      <div class="flex justify-between">
        <span class="text-ms">{{ item.title }}</span>
        <el-tag :type="item.unitColor" effect="plain">{{ item.unit }}</el-tag>
      </div>
      </template>
      <span class="text-3xl font-bold text-gray-500">
        <!-- {{ item.value }} -->
        <CountTo :value="item.value"/>
      </span>
      <el-divider></el-divider>
      <div class="flex justify-between text-sm text-gray-500">
      <span>{{ item.subTitle }}</span>
      <span>{{ item.subValue }}</span>
    </div>
    </el-card>
  </el-col>
   </el-row>    
   <IndexNavs />
   <el-row :gutter="20" class="mt-5">
    <el-col :span="12" :offset="0">
      <IndexChart v-permission="['getStatistics3,GET']"/>
    </el-col>
    
    <el-col :span="12" :offset="0" v-permission="['getStatistics2,GET']">
    <IndexCard title="店铺及商品提示" tip="店铺及商品提示" :btns="goods" class="mb-3"/>
    <IndexCard title="交易提示" tip="需要立即处理的交易订单" :btns="order"/>

    </el-col>
   </el-row>
   

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getStatistics1 ,getStatistics2} from '~/api/index.js'
import CountTo from '~/components/CountTo.vue'
import IndexNavs from '~/components/IndexNavs.vue'
import IndexChart from '~/components/IndexChart.vue'
import IndexCard from '~/components/IndexCard.vue'

// 定义一个变量来存储数据
const panels=ref([])
getStatistics1()
.then(res=>{
  // console.log(res);
  // 赋值给变量
  panels.value=res.panels
  console.log(panels.value);
})

const goods=ref([])
const order=ref([])
getStatistics2()
.then(res=>{
  // console.log(res);
  goods.value=res.goods
  order.value=res.order
})
</script>

<style scoped>


</style>